var btn = document.getElementById("btn");
//获取父级的main
var main = document.querySelector(".main");
//定义颜色
var colors = ["red", "green", "skyblue", "black"];
var speed = 1; //初始速度
var num = 0; //得分
var timer = null; //定时器
var flag = true;

btn.onclick = function () {
  this.style.display = "none";
  move();
};
// 创建方块
function createDiv() {
  var row = document.createElement("div");
  row.className = "row";

  //随机数   0-3的索引值
  var index = Math.floor(Math.random() * 4); //Math.round 可能会出现4，因此不能用

  //创建四列div（4个方块）
  for (var i = 0; i < 4; i++) {
    var div = document.createElement("div");

    //给方块上色  通过随机的索引值
    if (i == index) {
      div.className = "color";
      div.style.background = colors[i];
    }

    row.appendChild(div);
  }
  //添加行，把行添加到main的里面
  // main.appendChild(row);
  // if (main.children.length == 0) {
  //     //第一次的时候没有子元素，往最后面添加
  //     main.appendChild(row);
  // } else {
  //     //有了子元素  要往最前面添加
  //     main.insertBefore(row, main.children[0]);
  // }
  main.insertBefore(row, main.children[0]);
  //main.children[0]相当于里面没有东西  ，是undefined，所以第一次就相当于是appendChild
}

//运动方块
function move() {
  //为了方便清除,避免重复调用
  clearInterval(timer);
  timer = setInterval(function () {
    main.style.top = parseInt(main.offsetTop) + speed + "px";
    //创建一行div 但是有个前提条件，就是父级main走到0，才能创建新的一行
    if (parseInt(main.offsetTop) >= 0) {
      //创建div
      createDiv();
      main.style.top = "-150px";
    }

    var len = main.children.length;
    if (len == 6) {
      for (var i = 0; i < 4; i++) {
        if (main.children[len - 1].children[i].classList.contains("color")) {
          //这个条件成立，说明最后一行有色块
          alert("游戏结束，您的得分为" + num);
          clearInterval(timer);
          flag = false;
        }
      }
      main.removeChild(main.children[len - 1]);
    }
  }, 20);
  bindEvent();
}

//给方块添加点击事件
function bindEvent() {
  main.onclick = function (ev) {
    //如果游戏已经结束了  那么下面的代码就不要执行了
    if (!flag) {
      return;
    }
    var target = ev.target; //真正的事件源对象
    if (target.className == "color") {
      target.style.background = "#bbb";
      target.classList.remove("color");
      num++;
    } else {
      //点击白块
      alert("游戏结束，您的得分为" + num);
      clearInterval(timer);
      flag = false;
    }

    //速度变快，规定每隔十分让速度加1;
    if (num % 10 == 0) {
      speed++;
    }
  };
}
